<template>
  <div class="container">
    <ul class="nav">
      <li v-for="(value,index) in navData" @click="show(value.child_classify,value.id,index,value.name)" :class="{select: value.select}">
        {{value.name}}
        <img v-if="value.child_classify.length!=0 ? true : false"  :src="value.select ? 'http://file.rzkeji.com/web/loveciy/img/pull.png' : 'http://file.rzkeji.com/web/loveciy/img/pull1.png'" class="pull"/>
      </li>
    </ul>
    <drop1 :animationData="animationData" :type="classifyWen"  :tag="classify" v-if="wenTag"></drop1>
    <drop1 :animationData="animationData" :type="classifyDing" :tag="classify" v-else></drop1>
    <ul class="content clearfix">
      <li v-for="(value,index) in showData" @click="showImg(value.id)">
        <img :src="value.img_url" mode="aspectFit"/>
        <span class="title">{{value.name}}</span>
        <div class="price">
           <span class="selling">¥{{value.s_price}}</span>
           <!-- <span class="original">¥{{value.m_price}}</span> -->
        </div>
      </li>
    </ul>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
    <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://file.loveciy.net/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
  </div>
</template>

<script>
import drop1 from '@/components/drop'
export default {
  data () {
    return {
      animationData:{},
      animationData1:{},
      wenTag:false,
      classify:"classify",
      classifyDing:[],
      classifyWen:[],
      dingTag:false,
      ifLoad:false,
      navData:[{
          name:'全部',
          id:0,
          select:true
      }],
      tag2:1
    }
  },
  onReachBottom(){
    var _this=this;
    if(!_this.ifLoad)
    {
     _this.page++;
     _this.getData(_this.page,_this.classify_id)
    }
  },
  computed:{
    showData:{
      get: function () {
        return this.$store.state.modulesClassify.classifyData
      },
      set: function (newValue) {
        this.$store.dispatch('setClassifyData',newValue)
      }
    },
    page:{
      get: function () {
        return this.$store.state.modulesClassify.page
      },
      set: function (newValue) {
        this.$store.dispatch('setClassifyPage',newValue)
      }
    },
    classify_id:{
      get: function () {
        return this.$store.state.modulesClassify.classify_id
      },
      set: function (newValue) {
        this.$store.dispatch('setClassifyId',newValue)
      }
    },
  },
  components: {
      drop1
  },
  onShow(){
    var _this=this;
    /*初始数据*/
    wx.showNavigationBarLoading()
    _this.navData=[{
          name:'全部',
          id:0,
          select:true,
          child_classify:[]
      }];
    _this.classifyDing=[];
    _this.classifyWen=[];
    /*初始数据*/
    _this.$request.getData("https://zlz.loveciy.net/api/goods/get-classify","").then(res =>{
      var res=res.data.data;
      for(let [index,value] of res.entries())
      {
        _this.navData.push({
          name:value.name,
          id:value.id,
          select:false,
          child_classify:value.child_classify
        })
      }
      for(let [index,value] of res[0].child_classify.entries())
      {
        res[0].child_classify[index].select=false;
      }
      for(let [index,value] of res[1].child_classify.entries())
      {
        res[1].child_classify[index].select=false;
      }
      _this.classifyDing=res[0].child_classify;
      _this.classifyWen=res[1].child_classify;
      _this.classifyDing.unshift({
        name:'全部',
        select:true,
        id: _this.navData[1].id
      })
      _this.classifyWen.unshift({
        name:'全部',
        select:true,
        id:_this.navData[2].id
      })
      _this.page = 0
      _this.showData = []
      _this.getData(_this.page,"")
      wx.hideNavigationBarLoading()
    })
  },
  methods: {
   showImg(id){
    wx.navigateTo({
      url:"../shop/main?shopId="+id
    })
   },
   getData(page,id){
    var _this=this;
    _this.$request.getData("https://zlz.loveciy.net/api/goods/get-goods-list",{page:page,classify_id:id}).then(res =>{
      var res=res.data.data;
      if(res.length==0)
        {
        _this.ifLoad=true
        }else{
        _this.ifLoad=false
        }
      if(_this.tag2==1)
      {
        for(let [index,value] of res.entries())
        {
        _this.showData.push(value)
        }
      }
      
    })
   },
   show(type,id,select,name){
    console.log(type)
    var _this=this;
    _this.page=0;
    _this.classify_id=id;
    _this.getData(0,_this.classify_id);
    if(type.length==0){
      _this.tag2=1;
      _this.showData=[];
      _this.showDrop(0)
    }else if(type.length==0){
      _this.tag2=1;
      _this.showData=[];
      _this.showDrop(0)
    }else if(type.length!=0&&name.indexOf('文创')!=-1){
      _this.showDrop('wen')
    }else if(type.length!=0&&name.indexOf('定制')!=-1){
      _this.showDrop('ding')
    }
    for(let [index,value] of _this.navData.entries())
    { 
      value.select=false;
      if(index==select)
      {
       value.select=true;
      }
    }
   },
   showDrop(tag){
    console.log(tag)
    var _this=this;
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: 'linear',
    });
    if(tag==0){
      animation.height(0).opacity(1).step();
      _this.wenTag=false;
      _this.dingTag=false;
    }
    if(tag=="wen"&& _this.wenTag==false)    //这里是用来判断是否弹出菜单
    {
      _this.tag2=1;
      _this.showData=[];
      animation.height(157).opacity(1).step();
      _this.wenTag=true;
      _this.dingTag=false;
    }else if(tag=="wen"&& _this.wenTag==true){
      _this.tag2=0;
      console.log('a')
      animation.height(0).opacity(0).step();
      _this.wenTag=false;
      _this.dingTag=false;
      for(let [index,value] of _this.classifyWen.entries())
      { 
      value.select=false;
      }
      _this.classifyWen[0].select=true;
    }else if(tag=="ding"&& _this.dingTag==false)    //这里是用来判断是否弹出菜单
    {
      _this.tag2=1;
      _this.showData=[];
      animation.height(157).opacity(1).step();
      _this.dingTag=true;
      _this.wenTag=false;
    }else if(tag=="ding"&& _this.dingTag==true){
      _this.tag2=0;
      animation.height(0).opacity(0).step();
      _this.dingTag=false;
      _this.wenTag=false;
      for(let [index,value] of _this.classifyDing.entries())
      { 
      value.select=false;
      }
      _this.classifyDing[0].select=true;
    }
    _this.animationData=animation.export();
   }
  },
  onShareAppMessage: function (res) {   //分享
    this.$currency.share(res,'商品页面分享','/pages/classify/main')
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.nav{width:100%;height: 30px;display: flex;justify-content: row;border-bottom: 0.2px solid #d9d9d9;padding-bottom: 10px;margin-top: 10px;}
.nav li.select{color: #333333;border-bottom: 1px solid #cccccc;}
.pull{width: 15px;height: 9px;margin-top:12px;}
.nav li{width: 120px;height: 30px;text-align: center;line-height: 30px;color: #999999;padding-bottom:10px;font-size: 16px;}
.content{width: 96%;margin-left: 3%;}
.content li{width: 48%;margin-right: 2%;float: left;margin-top: 15px;height:297px;}
.content li img{width: 172px;height: 202px;}
.title{width: 100%;line-height: 30px;font-size: 14px;display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.price{width: 100%;height: 30px;font-size: 14px;}
.selling{color: red;}
.original{color: gray;margin-left: 5px;text-decoration: line-through;}
img.footer{width: 375px;height: 36px;display: block}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 20px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
</style>
